<template>
  <section>
    <el-row :gutter="20">
      <el-col :offset="1">
        <el-button type="primary" @click="addCourse()">新增课程</el-button>
      </el-col>
    </el-row>
    <el-row v-loading="loading">
      <el-col :span="8" v-for="(course, index) in courses" :key="course.id" :offset="index > 0 ? 2 : 2">
        <el-card :body-style="{ padding: '10px' }">
          <img :src="course.pic!=null?imgUrl+course.pic:'/static/images/nonepic.jpg'" class="image"/>
          <div style="padding: 10px;">
            <span>{{course.name}}</span>
            <div class="bottom clearfix">
              <time class="time"></time>
              <el-button type="text" class="button" @click="handleManage(course.id)">管理课程</el-button>
            </div>
          </div>
        </el-card>
      </el-col>


      <!--分页-->
      <el-col :span="24" class="toolbar fenye">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[8, 16, 24, 40]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-col>
    </el-row>
  </section>
</template>
<script>
  import * as courseApi from '../api/course';
  import utilApi from '../../../common/utils';

  let sysConfig = require('@/../config/sysConfig')
  export default {
    data() {
      return {
        loading: true,
        size: 8, // 每页显示多少个
        total: 100, // 总条数
        currentPage: 1, // 当前页数
        courses: [],
        sels: [],//列表选中列
        imgUrl: sysConfig.imgUrl
      }
    },
    methods: {
      //跳转页码方法
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getCourse();
      },
      //获取课程列表
      getCourse() {
        // 存页码,保证刷新页码还是当前页
        sessionStorage.setItem("size", this.size);
        sessionStorage.setItem("currentPage", this.currentPage);

        this.loading = true
        courseApi.findCourseList(this.currentPage, this.size, {}).then((res) => {
          if (res.success) {
            this.total = res.queryResult.total;
            this.courses = res.queryResult.list;
            this.loading = false;
          }
        });
      },
      handleManage: function (id) {
        // this.$router.push({path: '/course/manager/' + id})
        this.$router.push({
          path: '/course/manager/' + id,
          query: {
            size: this.size,
            currentPage: this.currentPage
          }
        })
      },
      // 切换每页显示的个数
      handleSizeChange(val) {
        this.size = val;
        this.getCourse();
      },
      // 点击新增课程按钮
      addCourse() {
        this.$router.push('/course/add/base')
      }
    },
    created() {

    },
    mounted() {
      if (this.$route.query.size == null || this.$route.query.currentPage == null) {
        // 读本地页码
        let size = sessionStorage.getItem("size");
        let currentPage = sessionStorage.getItem("currentPage");
        if (size == null || currentPage == null) {
          this.getCourse();
        }else {
          this.size = parseInt(size);
          this.currentPage = parseInt(currentPage);
          this.getCourse();
        }
      } else {
        //查询我的课程
        this.size = this.$route.query.size;
        this.currentPage = this.$route.query.currentPage;
        this.getCourse();
      }
    }
  }
</script>
<style>
  @import url("//unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css");

  .el-col-8 {
    width: 20% !important;
  }

  .el-col-offset-2 {
    margin-left: 5% !important;
    margin-top: 2% !important;
  }

  .time {
    font-size: 13px;
    color: #999;
  }

  /*更改默认样式 显示有问题*/
  .fenye .el-pagination__editor {
    border: none;
  }

  .fenye .el-select .el-input .el-input__icon {
    top: 0;
  }

  .grid-content {
    width: 96%;
  }

  .fenye {
    margin-top: 20px;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    display: block;
    width: 100% !important;
    height: 190px !important;
    object-fit: contain;
  }


  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
